<template>
  <div style="height: 100%">
    <ag-grid-vue
      style="width: 800px; height: 800px"
      class="ag-theme-quartz"
      :localeText="localeText"
      :columnDefs="columnDefs"
      @grid-ready="onGridReady"
      :defaultColDef="defaultColDef"
      :rowData="rowData"
    >
    </ag-grid-vue>
  </div>
</template>

<script>
  import { onBeforeMount, ref, shallowRef, getCurrentInstance } from 'vue';
  import { AG_GRID_LOCALE_ZZZ } from '@/utils/locale.js';
  // 获取当前组件实例
  // 打印看一下结构
  export default {
    name: 'App',
    setup(props) {
      const columnDefs = ref([{ field: 'athlete', filter: 'agMultiColumnFilter' }]);
      const gridApi = shallowRef();
      const defaultColDef = ref({
        flex: 1,
        minWidth: 200,
      });
      const localeText = ref(AG_GRID_LOCALE_ZZZ);
      // const sideBar = ref(null);
      const rowData = ref(null);

      // onBeforeMount(() => {
      //   sideBar.value = { toolPanels: ["filters"] };
      // });

      const onGridReady = (params) => {
        gridApi.value = params.api;

        const updateData = (data) => (rowData.value = data);

        fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
          .then((resp) => resp.json())
          .then((data) => updateData(data));
      };
      return {
        columnDefs,
        gridApi,
        defaultColDef,
        localeText,
        // sideBar,
        rowData,
        onGridReady,
      };
    },
  };
</script>
